<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Case Generator</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {    
             background-color: #cbc9c8;
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            padding: 0;
        }

        .title{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 17vh;
            font-family:Arial, Helvetica, sans-serif;
            padding-right: 30%;
            background-color: #4a6c8c;
            border-radius: 10px;
        }

        .title h1{
            font-size: 30px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #e7dfd4;
            padding-top: 1%;
            text-shadow:
                4px 4px 8px rgba(0, 0, 0, 0.5);
        }

        .title text{
            font-size: 60px;
            font-weight: bold;
            color: #f8e8d5;
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-style: italic;
            margin-right: 2%;
            padding-bottom: 1%;
            text-shadow:
                4px 4px 8px rgba(0, 0, 0, 0.5), 
                -4px -4px 8px rgba(255, 255, 255, 0.5);
        }

        .container {
             display: flex;
             justify-content: center;
             align-items: center;
             height: 78vh;
             margin-top: 0.5%;
             margin-bottom: 0.5%;
             background-color: #e7dfd4;
             border-radius: 10px;
             padding-top: 1%;
             padding-bottom: 1%;
         }

        .box {
            background-color: #afc8da;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            margin: 7%;
            padding: 20px;
            width: 40%;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            height: 500px;
        }

        .box h2 {
            text-align: center;
            margin-top: 0;
            margin-bottom: 20px;
            color: #22313f;
            font-weight: bold;
        }

        .box label {
            display: block;
            text-align: center;
            margin-bottom: 10px;
            color: #22313f;
        }

        .box select {
            padding: 8px;
            font-size: 14px;
            border-radius: 6px;
            border: 0.5px solid #d3d3d2;
            display: inline-block;
            width: 96%;
            margin-bottom: 5%;
            margin-left: 2%;
            background-color: #f9f7f7;
        }

        .box textarea {
            width: 100%;
            height: 100%;
            resize: vertical;
            padding: 8px;
            font-size: 16px;
            border-radius: 4px;
            border: 0.5px solid #d3d3d2;
            box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2);
            background-color: #f9f7f7;
        }

        .box-buttons {
            display: flex;
            justify-content: right;
            margin-top: 20px;
            margin-left: 12.5%;
            margin-right: 10%;
            font-family: Arial, sans-serif;
        }

        .box-buttons button {
            padding: 10px 20px;
            font-size: 14px;
            background-color: #3b5874;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-weight: bold;
        }

        .box-buttons button:hover {
            background-color: #233545;
        }

        .box-buttons1 {
            justify-content: left;
            margin-right: 10%;
        }

        .box-buttons, .box-buttons1 {
            display: inline-block;
        }

        .box2 {
            background-color: #22313f;
            color: #f8e8d5;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
        }

        .box2 textarea {
            background-color: #151f28;
            color: #f8e8d5;
            border: none;
            box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.7);
        }
        .box2-buttons button {
            background-color: #f8e8d5;
            color: #192435;
            font-weight: bold;
        }
        .box2-buttons button:hover {
            background-color: #cfc1b0;
        }
        .box2-buttons1 {
            justify-content: left;
        }
        .box2-buttons, .box2-buttons1 {
            display: inline-block;
        }
        textarea::placeholder {
            color: rgb(196, 196, 196);
            letter-spacing: 1px;

        }
        

        .welcome-screen {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(244, 243, 243, 0.9); 
            z-index: 1000; 
            opacity: 1;
            transition: opacity 0.5s ease-out;
            background-image: url('../static/images/bg1.jpg');
        }

        .welcome-screen h1{
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 60px;
            font-weight: bold;
            letter-spacing: 1px;
            color: #def2ff;
            /* color:#22313f; */
            text-shadow:
                6px 6px 12px rgba(0, 0, 0, 0.5), 
                -6px -6px 12px rgba(0, 0, 0, 0.5);
        }

        .welcome-message {
            font-size: 2em;
            animation: welcome-animation 2s ease-out forwards;
        }

        @keyframes welcome-animation {
            0% {
                transform: translateY(-280%);
                opacity: 0;
            }
            100% {
                transform: translateY(-260%);
                opacity: 1;
            }
        }

        .bottom{
            background-color: #4a6c8c;
            display: flex;
            justify-content: left;
            align-items: center;
            height: 18vh;
            border-radius: 10px;
        }

        .p1{
            color: #d3d3d2 ;
            font-size: 15px;
            margin-left: 6%;
        }
        .p2{
            color: #d3d3d2 ;
            font-size: 15px;
            margin-left: 18%;
        }

 
        .img1{
            width: 7.5%;
            height: 55%;
            margin-right: 3%;
        }

        .img2{
            width: 5.5%;
            height: 55%;
            margin-left: 5%;
            margin-right: 5%;
        }
        
    </style>
</head>
<body>
    <div id="welcome-animation" class="welcome-screen">
        <h1 class="welcome-message">Welcome   to   IntelliBlueATG !</h1>
    </div>
    
    <div class="title">
        <img class="img1" src="../static/images/logo.png">
        <text>IntelliBlueATG</text>
        <h1>软件测试用例自动生成器</h1>
    </div>
    <div class="container">
        <div class="box">
            <h2>源代码</h2>
            <div>
                    <select class="select" id="language">
                    <option value="">请选择语言</option>
                    <option value="python">Python</option>
                    <option value="java">Java</option>
                    <option value="cpp">C++</option>
                    <option value="c">C</option>
                </select>
            </div>
            <textarea id="code_textarea" placeholder="请输入源代码"></textarea>
            <div>
                <div class="box-buttons box-buttons1">
                    <button id="generate_tree">生成语法树</button>
                </div>
                <div class="box-buttons">
                    <button id="generate">生成测试用例</button>
                </div>
            </div>
        </div>

        <div class="box box2">
            <h2 style="color:#f8e8d5">测试用例</h2>
            <textarea id="test"></textarea>
            <div>
                <div class="box-buttons box2-buttons box2-buttons1">
                    <button>用例生成树</button>
                </div>
                <div class="box-buttons box2-buttons">
                    <button id="downloadCase">下载测试用例</button>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
       <img class="img2" src="../static/images/logo.png">
        <p class="p1">
        关于我们：<br><br>
        IntelliBlueATG 智慧蓝软件测试用例自动生成器 <br><br>
        是一款基于约束求解的自动化软件测试用例生成器
       </p>
       <p class="p2">
        联系我们：<br><br>
        电话号码：18874109893<br><br>
        电子邮箱：3085018791@qq.com
       </p>
    </div>
    <script src="../static/jquery-3.5.1.min.js"></script>
    <script src="../static/app.js"></script>
    <script src="../static/style.js"></script>

</body>

</html>